<template><!--讲师介绍-->
    <div v-if="item && !openClass">
        <recommend-btn v-if="typeKinds !== 'exam'" :itmId="$route.params.itmId"></recommend-btn>
        <div class="white-bg bottom-shadow" style="padding: 20px 0;" v-if="instructors && instructors.length > 0">
            <p class="paddingLR15" style="font-weight: bold;">{{ $t("cos_detail_instructor") }}</p>
            <div style="margin: 30px 5px 0 15px;">
                <div class="scroller-x">
                    <div class="clearfix instructor" :style="{width : (100 * instructors.length) + 'px'}">
                        <div class="module-box-21" v-for="instructor in instructors" :key="instructor.itiEntId">
                            <div @click="instructorDetail(instructor.itiEntId, instructor.itiImg)" v-if="instructor.itiEntId">
                                <div class="user clearfix">
                                    <img :src="appUrl + instructor.itiImg" alt=""/>
                                    <p>{{instructor.itiName}}</p>
                                    <p v-if="instructor.itiLevel"><span>{{ level[instructor.itiLevel] }}</span></p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="white-bg bottom-shadow padding43" :class="{'margin-top12' : instructors }">
            <p style="font-weight: bold;">{{ $t("cos_detail_basic_information") }}</p><!--基本信息-->
            <div class="box-18" v-if="item.itm_create_run_ind != 1 ">
                <p class="clearfix">
                    <span>{{ $t("cos_enroll_duration") }}</span><!--报名期限-->
                    <span>{{ $t("time_from") }}{{ item.itmAppnStartDatetime | formatDate}} {{ $t("time_to") }}</span>
                    <span v-if="item.itmAppnEndDatetime === '9999-12-31 23:59:59'">{{$t("cos_unlimited")}}</span>
                    <span v-else>{{item.itmAppnEndDatetime | formatDate}}</span>
                    <!--由/至/不限-->
                </p>
                <p v-if="item.itm_type != 'CLASSROOM'">
                    <span>{{ $t("mod_study_duration") }}</span><!--学习期限-->
                    <span>{{ $t("time_from") }}{{ $t("cos_detail_eff_start_time") }} {{ $t("time_to") }} {{ item.itmContentEffEndDatetime ? item.itmContentEffEndDatetime === '9999-12-31 23:59:59' ? $t("cos_unlimited") : subTime(item.itmContentEffEndDatetime) : item.itmContentEffDuration + '天' }}</span><!--由/报名成功当日/至/天（从报名被成功录取开始计算）/不限-->
                </p>
                <p v-if="item.itm_type == 'CLASSROOM' ">
                    <span>{{ $t("cos_training_duration") }}</span><!--培训期限-->
                    <span>{{ $t("time_from") }}{{ subTime(item.itmContentEffStartDatetime) }} {{ $t("time_to") }} {{ subTime(item.itmContentEffEndDatetime) }}</span>
                </p>
            </div>
            <div class="paddingT4"><!--考试编号/班级编号/课程编号-->
                <p>{{ typeKinds == 'exam' ? (item.itmRunInd? $t("examination_time_code") : $t("exam_code")) : (item.itmRunInd  ? $t("cos_class_code") : $t("cos_code"))}}</p>
                <p class="color999 margin-top10">{{ item.itmCode }}</p>
            </div>
        </div>
        <div class="white-bg bottom-shadow margin-top12 padding43">
            <p style="font-weight: bold;">{{ typeKinds == 'exam' ? $t("exam_conditions") : $t("cos_conditions") }}</p><!--考试条件/学习条件-->
            <div class="paddingT4">
                <p>{{ $t("cos_is_approval") }}</p><!--需要审批-->
                <p class="color999 margin-top10">{{ item.isApproval ? $t("global_yes") : $t("global_no") }}</p>
            </div>
        </div>
        <div class="white-bg bottom-shadow margin-top12 padding43">
            <p style="font-weight: bold;">{{ $t("cos_details") }}</p><!--详细信息-->
            <div class="paddingT4">
                <p>{{ $t("mod_desc") }}</p><!--简介-->
                <p class="color999 margin-top10" v-html="$xss(item.itmDesc)"></p>
            </div>
            <div class="paddingT4" v-if="catalogs.length > 0">
                <p>{{ $t("catalog_kinds") }}</p><!--目录分类-->
                <ul class="list-word">
                    <li v-for="(catalog, index) in catalogs" :key="index" @click="jumpDirectoryDetails(catalog.tndId)">
                        {{ catalog.tndTitle }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="mask-layer" v-if="maskShow"></div>
        <!--报名成功后才能进行此操作-->
    </div>
    <div v-else>
      <div class="white-bg bottom-shadow margin-top12 padding43">
        <p style="font-weight: bold;">{{ $t("cos_details") }}</p><!--详细信息-->
        <div class="paddingT4">
          <p>{{ $t("mod_desc") }}</p><!--简介-->
          <p class="color999 margin-top10" v-html="$xss(item.itmDesc)"></p>
        </div>
      </div>
    </div>
</template>

<script>
import recommendBtn from './recommend-btn';
export default {
    name: 'Composition',
    props: ['data'],
    components: {
        recommendBtn
    },
    data() {
        return {
            course: {},
            instructors: [], //讲师
            rated: {}, //已评分
            item: '', //课程信息
            catalogs: {}, //课程目录分类
            app: '',
            //preConditionsCouresDetail: [], //先修课程
            maskShow: false,
            layerShow: false,
            evaluationShow: false, //讲师评价
            itcId: '', //讲师ID
            level: { //级别
                J: this.$t('instructor_level_junior'), //'初级'
                M: this.$t('instructor_level_middle'), //'中级'
                S: this.$t('instructor_level_senior'), //'高级'
                D: this.$t('instructor_level_special') //'特聘'
            },
            typeOf: { //类型
                P: this.$t('instructor_type_part_time'), //'兼职'
                F: this.$t('instructor_type_duty') //'专职'
            },
            source: { //来源
                IN: this.$t('instructor_source_internal'), //'内部讲师'
                EXT: this.$t('instructor_source_External') //'外部讲师'
            },
            sendShow: false, //联系讲师
            typeKinds: 'cos', //课程类型
            openClass: false
        };
    },
    methods: {
        init() {
            // this.course = this.$store.getters.getDetail;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/detail`,
                params: {
                    itmId: this.$route.params.itmId
                    // mobileInd: 1
                }
            }).then(res => {
                // console.log(res.data);
                this.course = res.data;
                if (!this.course) {
                    this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/0`});
                }
                //课程类型
                var isExam = this.course.itmExamInd && this.course.itmExamInd > 0;
                if (isExam) {
                    this.typeKinds = 'exam';
                } else if (this.course.itmType && this.course.itmType === 'INTEGRATED') {
                    this.typeKinds = 'integrated';
                }
                if (this.course.courseEnum === 'OPEN_COURSE') {
                    this.openClass = true;
                }
                this.instructors = this.course.instructorInfDetailDTOS;
                // this.item = this.course.item;
                this.item = this.course;
                this.catalogs = this.course.itmCatList;
                // console.log(this.catalogs);
                this.app = {
                    appId: this.course.appId,
                    appTkhId: this.course.appTkhId
                };
                this.courseEvaluation = {
                    covStatus: this.learnerStatus
                };
                this.appStatus = this.getAppStatus(this.app, this.courseEvaluation); //报名学状态
            });
        },
        /**
         *判断是否已报名
         * @param app 学员报名信息
         * @param courseEvaluation 课程学习记录
         * @returns {string}
         */
        getAppStatus(app, courseEvaluation) {
            var result = 'notapp';//默认未报名
            if (courseEvaluation && courseEvaluation.covStatus) {
                result = courseEvaluation.covStatus;
            } else if (app) {
                result = app.appStatus;
            }
            return result;
        },
        subTime(value) { //yyyy-MM-dd HH:mm
            if (value) {
                return value.substring(0, value.indexOf(':', value.indexOf(':') + 1));
            } else {
                return value;
            }
        },
        instructorDetail(id, imag) { //跳转讲师详情
            this.$router.push({path: '/instructorDetail', query: {id, imag}});
        },
        contactInstructor(instructor) { //联系讲师--弹出讲师信息
            this.$store.state.course.isShowNav = false;//兼容Ios关闭点赞功能
            this.maskShow = true;
            this.layerShow = true;
            this.instructor = instructor;
        },
        //关闭联系讲师
        closeContact() {
            this.$store.state.course.isShowNav = true; //兼容IOs关闭点赞功能
            this.maskShow = false;
            this.layerShow = false;
        },
        //报名未成功点击讲师评分弹出提示
        JumpNeedPass() {
            this.$toast(this.$t('cos_tips_2'));
        },
        closeEvaluation() {
            this.$store.commit('setIsShowNav');
            this.evaluationShow = false;
        },
        //联系讲师站内信
        sand(instructor) {
            this.$store.commit('setInstructor', instructor);
            this.$router.push({path: '/sendCertifiedMessage'});
        },
        //目录跳转
        jumpDirectoryDetails(id) {
            if (this.typeKinds === 'exam') {
                this.$router.push({path: `/filterCertifiedDirectory/${id}/exam`});
            } else {
                this.$router.push({path: `/filterCertifiedDirectory/${id}/course`});
            }
        }
    },
    filters: {
        formatDate(time) {
            if (time) {
                return time.slice(0, time.indexOf(' '));
            }
        }
    },
    mounted() {
        this.init();
    },
    activated() {
        this.init();
    },
    computed: {
        unregisteredTwo() {
            let course = this.$store.getters.getDetail;
            let appStatus = this.getAppStatus(course.app, course.courseEvaluation); //报名学状态
            let enrollPassed = this.$store.getters.enrollPassed(appStatus); //报名不成功,审批，等待队列不算报名成功
            return enrollPassed;
        }
    }
};
</script>

<style scoped lang="less">
.instructor{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
    .module-box-21 {
        width: 90px;
        margin-right: 10px;
        box-sizing: border-box;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        .user {
            padding: 10px;
            text-align: center;
            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-bottom: 10px;
            }
            p{
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            p:nth-of-type(1) {
                font-weight: bold;
                font-size: 14px;
                margin-top: 3px;
            }
            p:nth-of-type(2) {
                font-size: 12px;
                color: #999999;
                margin-top: 3px;
            }
        }
        & > div > p {
            font-size: 12px;
            color: #666666;
            padding: 15px 15px 0;
            margin: 0 0 18px 0;
            height: 32px;
        }
        .btn-box {
            padding: 0 5px 0 0;
            span {
                float: right;
            }
        }
    }
    .padding43 {
        padding: 20px 15px;
    }
    .paddingT4 {
        padding: 20px 0 0 0;
    }
    .box-18 {
        padding-bottom: 15px;
        margin: 30px 0 0 0;
        background: #fafafa;
        border-radius: 3px;
        p {
            font-size: 12px;
            padding: 15px 15px 0 90px;
            span:nth-of-type(1) {
                margin-left: -75px;
                float: left;
                width: 70px;
            }
        }
    }
    .list-word li {
        margin: 10px 0 0 0;
        color: #075ebb;
    }
    .mask-layer {
        position: fixed;
    }
    .module-box-22 {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 505;
        width: 100%;
        div:nth-of-type(1) {
            margin: 15px 0;
        }
        ul {
            padding-bottom: 15px;
            li {
                padding: 30px 15px 0;
            }
        }
        div:nth-last-child(1) {
            padding: 15px;
            margin-bottom: 10px;
            box-sizing: border-box;
            i {
                margin: 0;
            }
        }
    }
    .mover-reply {
        position: fixed;
        z-index: 600;
        overflow: hidden;
        .mover-reply-header {
            position: fixed;
        }
        .content {
            overflow: auto;
        }
    }
    .module-box-23 {
        li {
            padding: 30px 15px 5px 5px;
            border-bottom: 1px solid #e6e6e6;
            &:nth-last-child(1) {
                border-bottom: none;
            }
            p {
                font-size: 16px;
                margin-bottom: 15px;
                padding: 0 10px;
            }
            span {
                padding-left: 25px;
                line-height: 40px;
            }
        }
    }
    .start-icon {
        width: 40px;
        height: 40px;
        background-size: 20px;
        background-position: 10px -25px;
        margin-right: 0;
        &.cur {
            background-position: 10px 5px;
        }
        &.half-cur {
            background-position: 10px -55px;
        }
    }
    .detail-btnRead {
        border-top: 1px solid #e6e6e6;
        div {
            background: #e6e6e6;
            color: #cccccc;
        }
        &.cur {
            div {
                background: #075ebb;
                color: #ffffff;
            }
        }
    }
    .module-box-24 {
        padding-top: 65px;
        li {
            text-align: center;
            font-size: 16px;
            margin-bottom: 15px;
            span {
                display: inline-block;
                margin: 0 auto;
            }
        }
    }
    .average-box {
        padding: 30px 0;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-radius: 5px;
        margin: 15px auto 15px;
        width: calc(100% - 30px);
        div {
            margin: 0 auto 10px;
            span {
                display: inline-block;
                .start-icon {
                    width: 32px;
                    height: 28px;
                    background-size: 26px;
                    background-position: 3px -45px;
                    &.cur {
                        background-position: 3px -6px;
                    }
                    &.half-cur {
                        background-position: 3px -84px;
                    }
                }
            }
        }
    }
    /*讲师评价和联系讲师的讲师信息*/
    .ter-box {
        background: #fafafa;
        padding: 25px 15px 25px 64px;
        .ter-img-box {
            float: left;
            margin-left: -50px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
    }
    .disc-icon {
        float: left;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1f53cc;
        margin: 7px 8px 0 0;
    }
    .scroller-x{
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
    }
    .scroller-x::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
    }
</style>
